<template>
  <div>
    <div class="bg-white grid-content">
      <el-form :inline="true" :model="xjbbForm" ref="xjbbForm" class="demo-form-inline">
        <el-row>
          <el-col :span="6" align="center">
            <el-form-item label="报表名称:">
              <el-input v-model="xjbbForm.bbmc" placeholder="请输入报表名称" clearable=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" align="center">
            <el-form-item label="报表分类:">
              <!-- <el-input
              v-model="xjbbForm.bbxl"
              placeholder="请输入报表分类"
              clearable=""
            ></el-input> -->
              <el-select v-model="xjbbForm.bblx" @change="Selectxl" placeholder="请输入报表分类" clearable="">
                <el-option label="分类" value="0"></el-option>
                <el-option label="报表" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" align="center">
            <el-form-item label="所属分类:">
              <el-select v-model="xjbbForm.pid" placeholder="请选择所属分类" clearable="" ref="optionref" >
                <el-option v-for="(item) in flList" :key="item.id" :label="item.bbmc" :value="item.id" />
                <el-option label="顶级分类" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" align="center">
            <el-form-item label="数据服务:" v-show="show">
              <el-select v-model="xjbbForm.sjfwIndexId" placeholder="请选择数据服务" clearable="">
                <el-option v-for="(item) in sjList" :key="item.id" :label="item.fwmc" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row  v-show="show">
          <el-col :span="9" align="center">
            <el-checkbox  align="center" v-model="checked">现有模板编辑</el-checkbox>
          </el-col>
        </el-row>
        <el-row v-if="checked">
          <el-col :span="16" align="center" >
            <el-form-item label="选择模板:">
              <el-select v-model="xjbbForm.mbid" placeholder="请选择模板" clearable="">
                <el-option v-for="(item) in mbList" :key="item.id" :label="item.bbmc" :value="item.id" />

              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="日期:">
          <el-date-picker v-model="searchDate" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item> -->
        <div>

          <!-- <el-button  type="primary" @click="close('xjbbForm')" class="mybb">取 消</el-button> -->
          <el-button @click="savexjbb" class="mybb">确 定</el-button>

        </div>
      </el-form>
    </div>
    <div class="bg-white grid-content">
      <!-- <div style="overflow: hidden; ">
        <div class="mytitle">分队分系统日报</div>
      </div> -->


    </div>
  </div>
</template>

<script>
import xjbbApi from '@/api/dtbb/bbmb';
import sjfwApi from '@/api/dtbb/sjfw';


export default {
  data() {
    return {
      show: false,//隐藏序列
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量          
      currentPage: 1,//当前页码
      xjbbForm: {
        bblx: '',//报表类型
        bbmc: '',//报表名称
        mbid: '',
        parentName:'',
        bbdm: '',
        id: '',
        open: '',
        pid: '',
        sjfwIndexId: '',

      },
      checked: false,//再次点击取消选择
      //控制查看时不可更改数据
      isInput: false,
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      searchDate: "",
      // 表格数据
      tableData: [],
      //excel数据
      excelData: [],
      approveStatus: '',
      fdfxtrbForm: {},
      targetFieldName: '',
      // // table数据总条数
      // tableTotal: 30,
      // // 分页数
      // currentSize: 10,
      // //当前页
      // currentPage: 4
      //获取报表分类列表0
      flList: [],
      //获取报表模板分类列表1
      mbList: [],
      //获取数据服务
      sjList: [],
    };
  },
  mounted() {
    this.searchMB();
    this.search();
    this.searchSj();
  },
  methods: {
    Selectxl(value) {
      console.log(value)
      if (value === '0') 
        this.show = false 
      else 
       this.show = true 
    },
    // async getName(){

    // },
    /**
    * 查询列表
    */
    //查询所属报表分类 
    async search() {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      // let res = await fdfxtApi.getFdfxtList(this.pageNo,this.pageSize,this.approveStatus,this.searchDate[0],this.searchDate[1]);
      let res = await xjbbApi.getList({ pageNo: '-1', pageSize: '-1', bblx: '0' });
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        console.log(11111);
        //赋值
        this.tableData = res.data.records;
        //总数量
        this.total = res.data.total;
        console.log(this.total);
        this.flList = res.data.records;
        // for(let i=0,j=0 ;i<this.total;i++)
        // {
        //   if(res.data.records[i].bblx === 0)
        //   {
        //     this.flList[j] = res.data.records[i]
        //     j=j+1
        //   } 
        // };
        // for(let i=0,j=0 ;i<this.total;i++)
        // {
        //   if(res.data.records[i].bblx === 1)
        //   {
        //     this.mbList[j] = res.data.records[i]
        //     j=j+1
        //   } 
        // };

        console.log(this.flList);
        console.log(this.mbList);
        console.log(1);
      }
    },
    //查询报表模板 
    async searchMB() {
      let res = await xjbbApi.getList({ pageNo: '-1', pageSize: '-1', bblx: '1' });
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        console.log(11111);
        //赋值
        this.tableData = res.data.records;
        //总数量
        this.total = res.data.total;
        console.log(this.total);
        this.mbList = res.data.records;

        console.log(this.flList);
        console.log(this.mbList);
        console.log(1);
      }
    },
    //查询数据服务
    async searchSj() {
      // this.searchModel.pageNo = pageNo; //当前页码
      // this.searchModel.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await sjfwApi.getList({ pageNo: '-1', pageSize: '-1', fwlx: '1' });
      //执行成功
      if (res.success) {
        console.log(res.data);
        //报表列表
        this.sjList = res.data.records;
        console.log(1212)
        console.log(this.sjList)
        //总数量
        // this.total = res.data.total;
      }
    },

    // 弹框关闭触发
    // close(formName) {
    //   //this.dialogFormVisible = false;
    //   // 清空表单
    //   // this.$refs[formName].resetFields();
    //   // 清空表单校验，避免再次进来会出现上次校验的记录
    //   this.$refs['xjbbForm'].clearValidate()
    // },
    // async change(){
    //   if(this.checked==='true')

    // },

    async savexjbb() {
      // if (this.xjbbForm.pid === '0') {
      //   this.xjbbForm.bblx = '0';
      //   this.isInput = false
      // } else {
      //   this.xjbbForm.bblx = '1';
      // }
      
      this.xjbbForm.parentName = this.$refs.optionref.selected.label
      console.log(this.xjbbForm.parentName);
      console.log('form' + JSON.stringify(this.xjbbForm));
      let res = await xjbbApi.add(this.xjbbForm);
      console.log(res)
      //判断是否成功
      if (res.success) {
        this.sjfwID = res.data;
        this.$message.success(res.message);
      } else {
        console.log(res)
        this.$message.error(res.message);
      }
    },

    submitForm(formName) {
      //表单验证
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = null;
          //判断ID是否为空
          if (this.xjbbForm.id === '') {
            console.log(1414)
            console.log(this.xjbbForm)
            console.log(typeof (this.xjbbForm.id))
            //发送添加请求
            res = await xjbbApi.add(this.xjbbForm);
          }
          console.log(res)
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);
            //刷新
            this.search();
            // //关闭窗口
            // this.dialogFormVisible = false;
          } else {
            console.log(res)
            this.$message.error(res.message);
          }
        }
      })
    },
    //选择报表分类

    /*** 当每页数量发生变化时触发该事件 */
    handleSizeChange(size) {
      console.log(size);
      this.pageSize = size;
      //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /*** 当页码发生变化时触发该事件 */
    handleCurrentChange(page) {
      console.log(page);
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    // 序号计算
    indexMethod(index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.pageNo - 1) * this.pageSize
    },
  },

};
</script>


<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: larger;
  padding-left: 45%;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.mybb {
  float: right;
  margin-right: 200px;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>